<template>
    <div>
        <div class="center-all clearfix position-r">
            <div class="center-all-img clearfix">
                <div class="income-title">
                    <van-row>
                        <van-col span="8">
                            <img class="fl icon_return" src="../../assets/image/center/jtb.png" alt="" @click="$router.back(-1)">
                        </van-col>
                        <van-col span="8" class="text-align-c font-36">充值</van-col>
                        <van-col span="8" class="text-align-r">
                            <router-link tag="span" class="font-3" :to="{name:'records2',params:{recordsId2:'1111'}}">交易记录</router-link>
                        </van-col>
                    </van-row>
                </div>
                <span class="my-income text-align-c">{{recharge}}</span>
                <span class="my-income-zi text-align-c color-6 font-28">金额(元)</span>
            </div>
            <div class="binding-phone" v-if="phone == '' || phone == undefined">
                <img class="gantanhao fl" src="../../assets/image/center/icon_tips.png" alt="">
                <span class="fl color-3 binding-wenan">为了您的账户安全,建议您尽快去绑定手机号</span>
                <router-link tag="span" :to="{name:'updatePhone'}" class="go-binding fl">去绑定</router-link>
                <img class="fl icon_close" src="../../assets/image/center/icon_close.png" alt="" @click="phone = -1">
            </div>
            <div class="income-list-box clearfix">
                <div class="income-list-tab">
                    <span class="fl font-6 color-3 font-bold">请选择充值金额</span>
                </div>
                <van-row gutter="15">
                    <van-col span="8" v-for="(item,index) in rechargeLists" :key="index" :class="[index > 2 ? 'marginTop' : '']">
                        <div class="zuanshi-box text-align-c color-3 font-3" :class="[listActive == index ? 'active' : '']" @click="listActive = index,zfMoney = item.price,moneyNum=''">
                            ￥{{item.price}}
                        </div>
                    </van-col>
                </van-row>
                <input type="number" class="input-zuan text-align-c" placeholder="请输入其他金额" v-model="moneyNum" @input="moneyNumActive()" />
                <ul class="zhifu-box clearfix">
                    <li class="clearfix">
                        <div class="income-list-tab">
                            <span class="fl font-6 color-3 font-bold">选择支付方式</span>
                        </div>
                    </li>
                    <li class="clearfix" v-for="(item,index) in zhifuType" :key="index" @click="zhifuActive = index">
                        <img v-if="item == '支付宝支付'" class="fl fangshi" src="../../assets/image/center/icon_zfb.png" alt="">
                        <img v-else class="fl fangshi" src="../../assets/image/center/icon_wx.png" alt="">
                        <span class="fl zfb font-3">{{item}}</span>
                        <img v-if="zhifuActive == index" class="fr xuanze" src="../../assets/image/center/icon_select.png" alt="" srcset="">
                        <img v-else class="fr xuanze" src="../../assets/image/center/icon_unchecked.png" alt="" srcset="">
                    </li>
                    <li class="clearfix color-9 font-2">
                        充值即表示同意<em class="color-default" @click="czxy = !czxy">《简单竞戈平台充值协议》</em>
                    </li>
                </ul>
            </div>
        </div>
        <van-tabbar>
            <router-link tag="span" :to="{path:'/balance',query:{type:41}}" class="fl tixian text-align-c color-default font-3">余额提现</router-link>
            <span class="fr tixian text-align-c zhifu font-3" @click="zhifu()">确认支付{{zfMoney}}元</span>
        </van-tabbar>
        <van-popup v-model="czxy" position="right" :overlay="false">
            <div class="czxy-style" @click="czxy = !czxy">
                <h2>简单竞戈充值服务协议</h2>
                <span>感谢您使用简单竞戈充值服务。简单竞戈充值服务协议（以下简称"本协议"）由XXXXXXX有限公司（以下简称"简单竞戈"）和您签订。</span>
                <h3>一、简单竞戈充值服务协议的确认</h3>
                <span>1.简单竞戈在此特别提醒您在使用简单竞戈充值服务之前，请认真阅读本协议，确保您充分理解本协议项下各条款的含义。请您审慎阅读并选择接受或不接受本协议。除非您接受本协议所有条款，否则您无权使用简单竞戈充值服务。您的使用等行为将视为对本协议的接受，并同意接受本协议各项条款的约束</span>
                <span>2.本协议可由简单竞戈随时更新，更新后的协议条款一旦公布即代替原来的协议条款，恕不再另行通知，用户可在本平台查阅最新版协议条款。在简单竞戈修改协议条款后，如果用户不接受修改后的条款，请立即停止使用简单竞戈充值服务，用户继续使用简单竞戈充值服务将被视为接受修改后的协议。</span>
                <span>3.如您为无民事行为能力人或限制民事行为能力人，请告知您的监护人，并在您监护人的指导下阅读本协议和使用简单竞戈充值服务。</span>
                <h3>二、简单竞戈充值服务相关定义</h3>
                <span>1.简单竞戈号：指您按照本平台《用户协议》规定的方式取得的、供您登陆本平台并使用部分本平台服务的号码</span>
                <span>2.简单竞戈充值账户（或称"账户"）：指您使用简单竞戈号登陆本平台并同意本协议后获得的、以您使用本平台服务向简单竞戈支付简单竞戈向您提供的商品或服务对应的价款为目的的账户。您取得简单竞戈充值账户后，简单竞戈号即成为您简单竞戈充值账户账号。</span>
                <span>3.账户余额：指您为了购买简单竞戈的商品或服务事先向简单竞戈支付的或第三方赠予给您的、可以用于抵扣简单竞戈商品或服务对价款的款项数额。</span>
                <span>4.身份要素：指简单竞戈用于识别您身份的信息要素，包括但不限于您的简单竞戈号、手机号、简单竞戈充值账户、支付密码、短信校验码、身份证件号码等。</span>
                <span>5.本平台：除本协议另有规定外，指"简单竞戈"移动应用软件。</span>
                <span>6.有权机关：指依照法律法规等有权要求查询、冻结或扣划资金等措施的单位，包括但不限于公安机关、检察院、法院、海关、税务机关。</span>
                <span>7.止付：限制措施的一种，指简单竞戈充值余额不能使用，例如不能用于支付、转出或发红包等服务。</span>
                <span>8.余额服务：指您在简单竞戈充值内的账户余额可以用于抵扣你应该向简单竞戈支付简单竞戈向您提供的各项商品或服务的对价款，诸如充值简单竞戈钻石、购买陪玩师服务等，以及基于您的申请将全部或部分账户余额退还给您本人支付宝等第三方支付平台支付账户内。</span>
                <h3>三、简单竞戈充值为您提供的服务内容</h3>
                <span>1.充值服务，您可以为了方便您在未来任意时间购买简单竞戈的商品或服务的目的，将您银行卡或您于第三方支付平台支付账户内的资金或您在本平台自任何第三人处以领取红包等方式受赠的资金充值到简单竞戈充值账户中。</span>
                <span>2.支付服务，你可以用您简单竞戈充值余额中的同等数额抵扣未来任意时间你向简单竞戈购买商品或服务时应向简单竞戈支付的对价款，诸如充值简单竞戈钻石、购买陪玩师服务等。抵扣成功后，您简单竞戈充值内的余额将被相应扣减。</span>
                <span>3.转出服务，你可以向简单竞戈申请将您简单竞戈充值的全部或部分余额退还您本人，除非有本协议第二条第7款或第四条第2款第(2)、(4)项或第五条第2款约定的情形，简单竞戈会将相应数额的款项以不计任何利息的方式退还给您本人。</span>
                <h3>四、 简单竞戈充值账户的注册和使用</h3>
                <span>1.    注册</span>
                <span>您完成简单竞戈号注册并激活后，即可使用部分简单竞戈充值服务；您还可以进一步申请并通过简单竞戈验证后，使用更多简单竞戈充值服务。具体验证方式以本平台内的提示为准。</span>
                <span>2.    使用</span>
                <span>身份要素是简单竞戈识别您身份的依据，请您务必妥善保管。使用身份要素进行的任何操作、发出的任何指令均视为您本人做出。因您的原因造成的账户、密码等信息被冒用、盗用或非法使用，由此引起的一切风险、责任、损失、费用等应由您自行承担。您同意：</span>
                <span>（1）    基于不同的终端以及您的使用习惯，简单竞戈可能采取不同的验证措施识别您的身份。例如您的简单竞戈充值账户在新设备首次登录的，简单竞戈可能通过密码加校验码的方式识别您的身份。</span>
                <span> (2）    为保障您的账户余额安全，请把手机及其他设备的密码设置成与简单竞戈号及简单竞戈充值账户的密码不一致。如您发现有他人冒用或盗用您的简单竞戈号或者简单竞戈充值密码，或您的手机或其他有关设备丢失时，请您立即以有效方式通知简单竞戈；您还可以向简单竞戈申请暂停或停止全部或部分简单竞戈充值服务。</span>
                <span> (3）    简单竞戈号及简单竞戈充值账号仅限您本人使用，不可转让、借用、赠与、继承，但简单竞戈充值账户内的相关财产权益可被依法继承。</span>
                <span>（4）    基于运行和交易安全的需要，简单竞戈可以暂停或者限制简单竞戈服务部分功能，或增加新的功能。</span>
                <h3>五、 使用简单竞戈充值服务的注意事项</h3>
                <span>1.    身份验证 </span>
                <span>您在使用简单竞戈充值服务过程中，特别是当你向简单竞戈充值充值数额或申请转出的账户余额数额较大时，为了确保您的合法权益并确保您的行为符合国家相关法律法规，简单竞戈有权要求您提供合法、真实、有效及完整的资料（包括但不限于身份证、绑定银行卡、绑定经验证的第三方支付平台支付账户、户口本、护照、营业执照、开户许可证等证明、联系方式、从事职业、通讯地址）对你进行身份认证。为了及时有效地验证您的信息（包括但不限于身份信息、银行账户信息等），根据法律法规及监管规定或简单竞戈认为有需要时，您同意我们可以把您的信息提供给第三方，也同意第三方可以把您的信息提供给简单竞戈，以便简单竞戈进行验证。您应确保简单竞戈号及简单竞戈号绑定的电子邮箱、手机号和第三方支付平台支付账户均为您本人合法所有。</span>
                <span>2.    存在如下情形时，简单竞戈会对您名下的简单竞戈充值账户或对余额进行止付，且有权限制您所使用的产品或服务功能：</span>
                <span>（1）    您违反了本协议的约定；</span>
                <span>（2）    根据法律法规及法律文书的规定；</span>
                <span>（3）    根据有权机关的要求；</span>
                <span>（4）    您的简单竞戈充值账户操作、余额流向等存在异常时；您的简单竞戈充值账户可能产生风险的；</span>
                <span>（5）    您遭到他人投诉，且对方已经提供了一定证据的；</span>
                <span>（6）    您可能错误地操作他人简单竞戈号或简单竞戈充值账户，或者将简单竞戈号或简单竞戈充值账户进行了身份验证的。</span>
                <span> (7）    除（2）、（3）规定的情形外，如您申请恢复服务、解除上述止付或限制，请您向简单竞戈提供相关资料及身份证明等文件，以便简单竞戈进行核实。</span>
                <span>（8）    如简单竞戈依据上述（1）、（2）、或（3）规定的情形将您的简单竞戈号或简单竞戈充值账户永久封禁，则简单竞戈将安排将您的简单竞戈充值余额退还至您绑定的第三方支付平台支付账户，如您绑定的第三方支付平台支付账户原因退还不成功或您未绑定第三方支付平台支付账户的，则需请您提供相关资料及身份证明等文件向简单竞戈申请余额退还。</span>
                <h3>六、简单竞戈充值服务规则</h3>
                <span>1.   简单竞戈充值服务中您可充值的数额、您可以转出的数额、您可以赠予给第三方的数额等，可能因您风险控制、身份要素验证、保障您合法权益等事由而有不同，具体额度请见本平台内的提示或公告。</span>
                <span>2.   您认可您简单竞戈充值内余额的使用记录、交易数据等均以简单竞戈系统记录为准。如您对该等数据存有异议的，可及时向简单竞戈提出异议，并提供相关证据供简单竞戈核实。</span>
                <span>3.   您在使用简单竞戈充值服务过程中，本协议内容、本平台上出现的关于操作的提示或简单竞戈发送到手机的信息内容是您使用简单竞戈充值服务的相关规则。</span>
                <span>4.   简单竞戈会以平台内公告、电子邮件、发送短信、电话、站内信或客户端通知等方式向您发送通知，例如通知您简单竞戈充值余额充值或抵扣进展情况，或者提示您进行相关操作，请您及时予以关注。</span>
                <span>5.   您应自行承担您使用简单竞戈充值服务期间的任何货币贬值、简单竞戈提高相关商品或服务价格等风险。</span>
                <h3>七、服务费用</h3>
                <span>当您使用您于第三方支付平台支付账户内的资金或使用第三方支付渠道支付您银行账户内的资金充值到简单竞戈充值账户时，或您使用您在本平台自任何用上述资金或以上述方式充值到简单竞戈充值的余额的任何第三方发送的红包时以领取红包的方式受赠的资金充值到简单竞戈充值账户时，该等支付平台或渠道会因此向简单竞戈收取一定的手续费，当您使用充值余额抵扣未来任意时间您向简单竞戈购买商品或服务时应向简单竞戈支付的对价款时，简单竞戈会为您承担抵扣余额对应的充值时支付平台向简单竞戈收取的手续费；当简单竞戈按您的指示将您的充值余额退还到您指定的第三方支付平台支付账户时，您需自行承担退还余额对应的充值时支付平台向简单竞戈收取的手续费，简单竞戈也有权依据运营情况自行决定在一定时间段内为您承担上述手续费而不需另行通知您。</span>
                <h3>八、用户合法使用简单竞戈充值服务的承诺</h3>
                <span>1.    您应遵守中华人民共和国相关法律法规及您所属、所居住或开展经营活动或其他业务的国家或地区的法律法规，不得将简单竞戈充值服务用于任何非法目的（包括洗钱等非法活动），也不得以任何非法方式使用简单竞戈充值服务。</span>
                <span>2.    您不得利用简单竞戈充值服务从事侵害他人合法权益之行为，否则简单竞戈有权进行调查、延迟结算或拒绝提供简单竞戈充值服务，且您应承担所有相关法律责任，因此导致简单竞戈或其他方受损的，您应承担赔偿责任。</span>
                <span>3.    上述1和2适用的情况包括但不限于：</span>
                <span>1)    侵害他人名誉权、隐私权、商业秘密、商标权、著作权、专利权等合法权益。</span>
                <span>2)    违反依法定或约定之保密义务。</span>
                <span>3)    冒用他人名义使用简单竞戈充值服务。</span>
                <span>4)    从事不法交易行为， 如洗钱、恐怖融资、贩卖枪支、毒品、禁药、盗版软件、黄色淫秽物品、其他简单竞戈认为不得使用简单竞戈充值服务进行交易的物品等。</span>
                <span>5)    提供赌博资讯或以任何方式引诱他人参与赌博。</span>
                <span>6)    从事任何可能侵害简单竞戈充值服务系统、数据之行为。</span>
                <span>4.    您理解，简单竞戈充值服务有赖于系统的准确运行及操作。若出现系统差错、故障或其他原因引发的展示错误、您或简单竞戈不当获利等情形，您同意简单竞戈可以采取更正差错、扣划款项等适当纠正措施。</span>
                <h3>九、权益保障及隐私保护</h3>
                <span>1.   用户账户余额安全保障</span>
                <span>简单竞戈始终重视保护用户的账户余额安全，将自有资金和用户账户余额分开存放，承诺不挪用、占用用户账户余额。如您在使用简单竞戈充值服务过程中，由于您的简单竞戈充值账户或密码被盗用造成的账户余额损失，经简单竞戈同意，您可授权简单竞戈代表您向相关责任第三方或赔付机构进行追偿。您与简单竞戈另有约定的除外。</span>
                <span>2.   用户权益及隐私权保护</span>
                <span>简单竞戈重视对用户合法权益的保障和隐私的保护。关于您的身份资料和其他特定资料依本平台《用户协议》受到保护与规范，您的合法权益简单竞戈承诺按本平台《用户协议》及本协议的相关约定给予保障。</span>
                <h3>十、不可抗力、免责</h3>
                <span>因下列原因导致简单竞戈无法正常提供服务，简单竞戈不承担任何责任：</span>
                <span>（1）    简单竞戈系统停机维护或升级；</span>
                <span>（2）    因台风、地震、洪水、雷电或恐怖袭击等不可抗力原因；</span>
                <span>（3）    用户的手机等移动通信终端软硬件和通信线路、供电线路出现故障的；</span>
                <span>（4）    用户操作不当或通过非简单竞戈授权或认可的方式使用简单竞戈充值服务的；</span>
                <span>（5）    因病毒、木马、恶意程序攻击、网络拥堵、系统不稳定、系统或设备故障、通讯故障、电力故障、银行原因 、第三方服务瑕疵或政府行为等原因。</span>
                <span>（6）    尽管有前款约定，简单竞戈将采取合理行动积极促使服务恢复正常。</span>
                <h3>十一、完整协议</h3>
                <span>本协议由简单竞戈《用户协议》、《简单竞戈充值服务协议》条款与简单竞戈平台不时公示的各项规则组成，各项规则有约定，而本协议条款没有约定的，以各项规则约定为准。本协议部分内容被有管辖权的法院认定为违法或无效的，不影响其他内容的效力。</span>
                <h3>十二、知识产权的保护</h3>
                <span>1.   简单竞戈及关联公司所有系统及本简单竞戈平台上所有内容，包括但不限于著作、图片、档案、资讯、资料、网站架构、网站画面的安排、网页设计，均由简单竞戈或简单竞戈关联公司依法拥有其知识产权，包括但不限于商标权、专利权、著作权、商业秘密等。</span>
                <span>2.   非经简单竞戈或简单竞戈联公司书面同意，任何人不得擅自使用、修改、反向编译、复制、公开传播、改变、散布、发行或公开发表本网站程序或内容。</span>
                <span>3.   尊重知识产权是您应尽的义务，如有违反，您应承担损害赔偿责任。</span>
                <h3>十三、 法律适用与管辖</h3>
                <span>本协议的订立、执行和解释以及争议的解决均应试用中华人民共和国大陆地区法律。因本协议产生之争议，均应依照中华人民共和国法律予以处理，并由简单竞戈所在地人民法院管辖。</span>
            </div>
        </van-popup>
    </div>
</template>
<script>
import { Toast } from 'vant'
import apiHttp from '../../api/index'
export default {
    data(){
        return{
            czList:['',''],
            currentDate: new Date(),
            isDatetime:false,
            phone:this.$route.query.phone,
            zhifuType:['支付宝支付','微信支付'],
            zhifuActive:1,
            moneyNum:'',
            recharge:'',
            rechargeLists:[],
            listActive:0,
            zfMoney:'',
            czxy:false,
            formZFB:''
        }
    },
    created(){
        this.getUserWalletDetail()
        this.rechargeList()
    },
    watch:{},
    computed:{},
    methods:{
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`;
            } else if (type === 'month') {
                return `${value}月`
            }else{
                return value;
            }
        },
        confirmData(data){
            let endvalue = new Date(data)
            this.isDatetime = !this.isDatetime
        },
        getUserWalletDetail(){
            apiHttp.apiCenter.getUserWalletDetail('',resp=>{
                if(resp.code == 200){
                    this.recharge = resp.data.recharge
                }
            })
        },
        //支付
        zhifu(){
            let payType = ''
            if(this.zhifuActive == 0){
                payType = 10
            }else{
                payType = 2
            }
            let params = {
                money:this.zfMoney,
                payType:payType,    //支付类型: 1微信公众号 2微信H5 3微信APP；10支付宝; 100余额支付 101代币（钻石）支付
                count:1,
                source:1,       // 订单来源 1APP 2IOS 3WEB
                platform:this.$store.state.platform      // 1 安卓APP(非IOS）  2IOSAPP   3WEB
            }
            apiHttp.apiCenter.rechargePay(params,resp=>{
                if(resp.code == 200){
                    if(payType == 2){
                        location.href = resp.data
                    }else{
                        this.formZFB = resp.data
                        const div = document.createElement('div')
                        div.innerHTML = this.formZFB
                        document.body.appendChild(div)
                        document.forms[0].submit()
                    }
                }else{
                    Toast(resp.message)
                }
            })
        },
        // 充值列表
        rechargeList(){
            let params = {
                source:1
            }
            apiHttp.apiCenter.rechargeList(params,resp=>{
                if(resp.code = 200){
                    this.rechargeLists = resp.data
                    if(this.listActive == 0){
                        this.zfMoney = this.rechargeLists[0].price
                    }
                }else{
                    Toast(resp.message)
                }
            })
        },
        moneyNumActive(){
            if(this.moneyNum.indexOf(".") != -1 && this.moneyNum.substring(this.moneyNum.indexOf("."),this.moneyNum.length).length>3){
                this.moneyNum = 1.00
                this.zfMoney = this.moneyNum
                Toast('最多只能有两位小数')
            }
            if(this.moneyNum < 1){
                this.listActive = -1
                this.moneyNum = 1
                Toast('充值最少金额不能少于1')
                this.zfMoney = this.moneyNum         
            }else if(this.moneyNum>50000){
                this.listActive = -1
                this.moneyNum = 50000
                Toast('充值最大金额不能大于50000')
                this.zfMoney = this.moneyNum
            }else if(this.moneyNum == ''){
                this.listActive = 0
            }else{
                this.zfMoney = this.moneyNum
            }
            if(this.moneyNum != ''){
                this.listActive = -1
            }
        }
    }
}
</script>

<style scoped>
.font-6{
    font-size: 0.62rem;
}
.van-tabbar--fixed{
    bottom: 0.4rem;
}
.marginTop{
    margin-top: .4rem;
}
.center-all{
    background: url(../../assets/image/index/img_bj_money.png);
    background-position:top center;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
}
.center-all-img{
    padding: .2rem .6rem;
    width: calc(100% - 1.2rem);
    height: 8rem;
}
.income-title{
    height: 1.36rem;
    line-height: 1.36rem;
    color:#fff;
}
.icon_return{
    width: .8rem;
    margin-top: .28rem;
}
.my-income{
    font-size: 1.2rem;
    display: block;
    height: 2rem;
    line-height: 2.4rem;
    padding-top: 3rem;
    color: #fff;
}
.my-income-zi{
    display: block;
    padding-bottom: 3rem;
    color: #FFAFAE;
}
.income-list-box{
    width: calc(100% - 1.2rem);
    padding: 4rem .6rem 0 .6rem;
}
.income-list-tab{
    height: 1rem;
    line-height: 1rem;
    padding: 1rem .2rem .2rem .2rem;
    margin-bottom: 0.3rem;
}
.zuanshi-box{
    padding: .4rem;
    width: calc(100% - .8rem);
    border:solid .04rem #D84E4D;
    border-radius: .2rem;
    height: 1rem;
    line-height: 1rem;
}
.input-zuan{
    height: 1rem;
    line-height: 1em;
    width: 100%;
    display: block;
    border:solid .04rem #f5f5f5;
    border-radius: .2rem;
    margin-top: .6rem;
    padding: .3rem 0;
    font-size: .6rem;
}
.input-zuan::-webkit-input-placeholder{
    color: #999;
    font-size: .6rem;
}
.zhifu-box{
    margin-bottom: 3rem;
}
.zhifu-box li{
    width: 100%;
}
.zhifu-box li:nth-child(1){
    margin-top: 0.4rem;
}
.zhifu-box li:nth-child(2){
    margin: 0.2rem 0 0.8rem 0;
}
.zhifu-box li:nth-child(3){
    margin: 0.6rem 0;
}
.fangshi{
    width: 1rem;
}
.zfb{
    height: 1rem;
    line-height: 1rem;
    display: inline-block;
    padding-left: .4rem;
}
.xuanze{
    width: .8rem;
}
.top-up-zhifu{
    margin: 1rem 0;
}
.active{
    background-color: #d84e4d;
    color: #fff;  
}
.van-tabbar{
    padding: 0 .6rem;
    height: 2rem;   
}
.tixian{
    width: 6rem;
    height: 1.2rem;
    line-height: 1.2rem;
    margin-top: .5rem;
    display: block;
    overflow: hidden;
    border-radius: .7rem;
    border: solid .04rem #D84E4D;
}
.zhifu{
    background-color: #d84e4d;
    color: #fff; 
    margin-left: 2rem;
}
.binding-phone{
    position: absolute;
    left: .6rem;
    top:1.6rem;
    width: calc(100% - 1.2rem);
    height: 1.8rem;
    background-color: #fff;
    border-radius: 1rem;
    opacity: 0.85;
}
.gantanhao{
    width: .6rem;
    margin-top: .6rem;
    margin-left: .6rem;
}
.binding-wenan{
    margin-top: .6rem;
    height: .6rem;
    line-height: .6rem;
    padding-left: .3rem;
}
.go-binding{
    background-color: #d84e4d;
    color: #fff;
    padding: .1rem .2rem;
    border-radius: .3rem;
    margin-top: .5rem;
    height: .6rem;
    line-height: .6rem;
    display: inline-block;
    margin-left: .2rem;
}
.icon_close{
    width: .4rem;
    margin-top: .7rem;
    margin-left: .3rem;
}
.czxy-style{
    padding: .6rem;
    text-align: center;
}
.czxy-style span{
    text-align: left;
    display: block;
}
</style>

